<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix" style="background-color: #d3dbeb">
      <span style="display: inline-block; padding: 18px 20px">隧道示意图</span>
      <el-checkbox v-model="checked" @change="checkedChangeHandle">展示闸机数据</el-checkbox>
    </div>

    <div>
      <div class="description">
        <ul class="colorListUl">
          <li v-for="col in dptList" :key="col.value">
            <span :style="{ backgroundColor: col.value }" class="colorDiv"></span>
            {{ col.label }}
          </li>
        </ul>
      </div>
    </div>
    <div style="display: flex">
      <div v-if="mapSwait" class="mapBox">
        <img v-if="imgSrc" class="mapImg" :src="imgSrc" alt />
        <!-- 监控设备 -->
        <el-popover
          v-for="cameraItem in videoList"
          :key="cameraItem.id"
          placement="top-start"
          class="cameraItem"
          :style="{ left: cameraItem.x + 'px', top: cameraItem.y + 'px' }"
          trigger="hover"
        >
          <div class="labelDiv">
            <span class="shallow">监控名称:</span>
            <span class="deep">{{ cameraItem.name }}</span>
          </div>
          <div class="labelDiv">
            <span class="shallow">区域:</span>
            <span class="deep">{{ cameraItem.area ? cameraItem.area.name : '无' }}</span>
          </div>
          <div class="labelDiv">
            <span class="shallow">状态:</span>
            <span class="deep">{{ cameraItem ? cameraItem.status : '' }}</span>
          </div>
          <div class="labelDiv">
            <span class="shallow">说明:</span>
            <span class="deep">点击查看视频</span>
          </div>
          <img slot="reference" :src="iconData[1].value" alt="监控" @click="openVideoHandler(cameraItem)" />
        </el-popover>
        <!-- 基站覆盖范围 -->
        <template v-for="baseStationItem in baseStationList">
          <el-popover
            :key="baseStationItem.id"
            placement="top-start"
            class="up"
            :style="{ left: baseStationItem.x + 'px', top: baseStationItem.y + 'px', zIndex: 10 }"
            trigger="hover"
          >
            <div class="labelDiv">
              <span class="shallow">基站名称:</span>
              <span class="deep">{{ baseStationItem.name }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">基站类型:</span>
              <span class="deep">{{ baseStationItem.siteType }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">区域:</span>
              <span class="deep">{{ baseStationItem.areaName }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">状态:</span>
              <span class="deep">{{ baseStationItem.status }}</span>
            </div>
            <!-- <div class="labelDiv">
              <span class="shallow">考勤机站:</span>
              <span class="deep">{{ baseStationItem.isForWorkCheck ? '是' : '否' }}</span>
            </div> -->
            <img slot="reference" :src="iconData[0].value" alt="基站" />
          </el-popover>
        </template>
        <div
          v-for="item in baseStationList"
          :key="item.name"
          :style="{
            width: item.widthPosition + 'px',
            height: item.heightPosition + 'px',
            transform: 'rotateZ(' + item.rotate + 'deg)',
            left: item.leftPosition + 'px',
            top: item.topPosition + 'px',
            zIndex: 10
          }"
          class="range"
        >
          <!-- 施工队员位置 -->
          <el-popover
            v-for="baseStationLi in item.arr"
            :key="baseStationLi.id"
            placement="top-start"
            class="peopleTwo"
            :style="{
              backgroundColor: `${baseStationLi.color}`,
              transform: 'rotateZ(' + -Number(item.rotate) + 'deg)',
              left: baseStationLi.left + 'px',
              top: baseStationLi.top + 'px'
            }"
            trigger="hover"
          >
            <div class="labelDiv">
              <span class="shallow">人员名称:</span>
              <span class="deep">{{ baseStationLi.name }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">RFID卡:</span>
              <span class="deep">{{ baseStationLi.rfid }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">联系方式:</span>
              <span class="deep">{{ baseStationLi.phone }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">是否在职:</span>
              <span class="deep">{{ baseStationLi.status ? '是' : '否' }}</span>
            </div>
            <img slot="reference" :src="iconData[2].value" alt="施工队员" style="width: 20px; height: 20px" />
          </el-popover>
          <!-- 车辆位置 -->
          <el-popover
            v-for="carItem in item.carArr"
            :key="carItem.id"
            placement="top-start"
            class="people"
            :style="{
              transform: 'rotateZ(' + -Number(item.rotate) + 'deg)',
              left: carItem.left + 'px',
              top: carItem.top + 'px'
            }"
            trigger="hover"
          >
            <div class="labelDiv">
              <span class="shallow">负责人:</span>
              <span class="deep">{{ carItem.propleName }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">联系方式:</span>
              <span class="deep">{{ carItem.proplePhone }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">RFID卡:</span>
              <span class="deep">{{ carItem.rfid }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">车辆类型:</span>
              <span class="deep">{{ carItem.name }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">车牌号:</span>
              <span class="deep">{{ carItem.plateNumber }}</span>
            </div>
            <img slot="reference" :src="iconData[3].value" alt="车辆" style="width: 20px; height: 20px" />
          </el-popover>
        </div>
        <!-- 闸机覆盖范围 -->
        <div
          v-for="gatesItem in gatesList"
          :key="gatesItem.name"
          :style="{
            width: gatesItem.widthPosition + 'px',
            height: gatesItem.heightPosition + 'px',
            transform: 'rotateZ(' + gatesItem.rotate + 'deg)',
            left: gatesItem.leftPosition + 'px',
            top: gatesItem.topPosition + 'px',
            zIndex: 10
          }"
          class="range"
        >
          <!-- 施工队员位置 -->
          <el-popover
            v-for="li in gatesItem.arr"
            :key="li.id"
            placement="top-start"
            class="peopleTwo"
            :style="{
              backgroundColor: `${li.color}`,
              transform: 'rotateZ(' + -Number(gatesItem.rotate) + 'deg)',
              left: li.left + 'px',
              top: li.top + 'px'
            }"
            trigger="hover"
          >
            <div class="labelDiv">
              <span class="shallow">人员名称:</span>
              <span class="deep">{{ li.name }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">RFID卡:</span>
              <span class="deep">{{ li.rfid }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">联系方式:</span>
              <span class="deep">{{ li.phone }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">是否在职:</span>
              <span class="deep">{{ li.status ? '是' : '否' }}</span>
            </div>
            <img slot="reference" :src="iconData[2].value" alt="施工队员" style="width: 20px; height: 20px" />
          </el-popover>
          <!-- 车辆位置 -->
          <el-popover
            v-for="carItem in gatesItem.carArr"
            :key="carItem.id"
            placement="top-start"
            class="people"
            :style="{
              transform: 'rotateZ(' + -Number(gatesItem.rotate) + 'deg)',
              left: carItem.left + 'px',
              top: carItem.top + 'px'
            }"
            trigger="hover"
          >
            <div class="labelDiv">
              <span class="shallow">负责人:</span>
              <span class="deep">{{ carItem.propleName }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">联系方式:</span>
              <span class="deep">{{ carItem.proplePhone }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">RFID卡:</span>
              <span class="deep">{{ carItem.rfid }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">车辆类型:</span>
              <span class="deep">{{ carItem.name }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">车牌号:</span>
              <span class="deep">{{ carItem.plateNumber }}</span>
            </div>
            <img slot="reference" :src="iconData[3].value" alt="车辆" />
          </el-popover>
        </div>
        <!-- 环境监测设备 -->
        <template v-for="environmentalItem in environmentalList">
          <el-popover
            :key="environmentalItem.id"
            placement="top-start"
            class="cameraItem"
            :style="{ left: environmentalItem.x + 'px', top: environmentalItem.y + 'px' }"
            trigger="hover"
          >
            <div class="labelDiv">
              <span class="shallow">设备名称:</span>
              <span class="deep">{{ environmentalItem.name }}</span>
            </div>
            <div class="labelDiv">
              <span class="shallow">设备IP:</span>
              <span class="deep">{{ environmentalItem.ip }}</span>
            </div>
            <template v-if="environmentalItem.settingItems.length > 0">
              <div v-for="(project, projectIndex) in environmentalItem.settingItems" :key="project.labelValue" class="labelDiv">
                <span v-if="projectIndex === 0" class="shallow">检测项目:</span>
                <span v-else class="shallow"></span>
                <span class="deep">{{ project.label }}</span>
              </div>
            </template>
            <template v-else>
              <div class="labelDiv">
                <span class="shallow">检测项目:</span>
                <span class="deep">无</span>
              </div>
            </template>
            <img slot="reference" :src="iconData[4].value" alt="环境检测设备" @click="toHandler()" />
          </el-popover>
        </template>
      </div>
      <div>
        <ul class="topUl">
          <li class="liTitle">
            <span class="label">区域</span>

            <span class="value tableValue">人数</span>
            <span class="value tableValue">车辆数</span>
          </li>
          <li v-for="areaItem in areaList" :key="areaItem.name" class="liTitle">
            <span :class="areaItem.color" class="label">{{ areaItem.name }}</span>
            <span :class="areaItem.color" class="value tableValue">{{ areaItem.peopleCount }}</span>
            <span :class="areaItem.color" class="value tableValue">{{ areaItem.carCount }}</span>
          </li>
          <li class="liTitle">
            <span class="label">场内总人数统计</span>
            <span class="value tableValue">{{ allPeopleCount }}</span>
            <span class="value tableValue">{{ allCarCount }}</span>
          </li>
        </ul>
      </div>
    </div>

    <videoDialog ref="videoDialog"></videoDialog>
  </el-card>
</template>
<script>
import { assetsImages } from '@/utils/images'
import listMixin from '@/mixins/list'
import videoDialog from './components/videoDialog'
import { tunnelRealTime, tunnel, parameter, area, department } from '@/api/api'
import { localhostUrl, imgUrl } from '@/utils/setUrl.js'
import { mapGetters } from 'vuex'
export default {
  components: {
    videoDialog
  },
  mixins: [listMixin],
  data() {
    return {
      // 是否展示闸机数据
      checked: true,
      areaPeopleNumber: {},
      imgSrc: '',
      // 地图：单洞
      singleHole: assetsImages.singleHole,
      // 地图：双洞
      doubleHole: assetsImages.doubleHole,
      // 表单数据
      iconData: [
        { name: 'BaseStationImage', value: assetsImages.baseStation, id: null }, // 基站
        { name: 'MonitorImage', value: assetsImages.camera, id: null }, // 监控
        { name: 'PeopleImage', value: assetsImages.people, id: null }, // 人员
        { name: 'CarImage', value: assetsImages.car, id: null }, // 车辆
        { name: 'AccessControlImage', value: assetsImages.sensor, id: null } // 环境监测设备
      ],
      // 传感器图片
      // people: assetsImages.people,
      mapSwait: false,
      // 监控数组
      videoList: [],
      // 传感器数组
      sensor: [],
      // 基站数组
      baseStationList: [],
      // 闸机数组
      gatesList: [],
      // 区域数组
      areaList: [],
      allPeopleCount: 0,
      allCarCount: 0,
      // 出基站
      outSite: [],
      // 环境检测设备
      environmentalList: [],
      // 定时器ID
      timeId: '',
      // 最大值
      maxDist: 0,
      // 部门
      dptList: []
    }
  },
  computed: {
    ...mapGetters(['gateSwaitch'])
  },
  async mounted() {
    await this.dptHandler()
    // await this.getTunnelData()

    if (this.gateSwaitch === '不展示') {
      this.checked = false
      await this.checkedChangeHandle()
    } else {
      this.checked = true
      await this.checkedChangeHandle()
    }
    this.timeId = setInterval(async () => {
      this.buildLocation()
    }, 1000 * 10)
  },
  beforeDestroy() {
    clearInterval(this.timeId)
  },
  methods: {
    // 是否展示闸机数据
    async checkedChangeHandle() {
      this.$store.dispatch('user/setGateSwaitch', this.checked ? '展示' : '不展示')
      await this.buildLocation()
    },
    // 跳转环境监测页
    toHandler() {
      // this.$router.push({ name: 'environmental', query: { name: data } })
      this.$router.push({ name: 'environmental' })
    },
    // 随机生成16进制颜色
    getColor() {
      var str = '#'
      //一个十六进制的值的数组
      var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
      for (var i = 0; i < 6; i++) {
        //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
        var num = parseInt(Math.random() * 16)
        str += arr[num]
      }
      return str
    },
    // 部门
    async dptHandler() {
      try {
        let obj = { pageIndex: 1, pageSize: 1e8 }
        let res = await department('post', obj, false)
        if (res.code === 200) {
          this.dptList = []
          res.data.items.map((item, index) => {
            if (item.visable) {
              this.dptList.push({
                label: item.deptName,
                id: item.id,
                value: item.color ? item.color : this.getColor()
              })
            }
          })
        }
      } catch (err) {
        let er = err
      }
      this.dptList.push({
        label: '未分配',
        id: '无',
        value: '#4876FF'
      })
    },
    // 获取所有区域
    async getArea(value) {
      this.allPeopleCount = 0
      this.allCarCount = 0
      try {
        this.areaList = []

        this.areaList = value.map(item => {
          let color = ''
          item.limitation = !item.limitation && item.limitation !== 0 ? 'null' : Number(item.limitation)
          item.totalCount = Number(item.totalCount)

          if (item.limitation === 0) {
            color = item.limitation >= item.totalCount ? 'lime' : 'red'
          } else if (item.limitation === 'null') {
            color = 'lime'
          } else {
            color = item.limitation >= item.totalCount ? 'lime' : 'red'
          }
          this.allPeopleCount += item.peopleCount
          this.allCarCount += item.carCount
          return {
            color,
            name: item.name,
            value: item.totalCount,
            carCount: item.carCount,
            peopleCount: item.peopleCount,
            id: item.id,
            limitation: Number(item.limitation)
          }
        })
      } catch (err) {
        let er = err
      }
    },
    // 基站图片
    async getBaseStationImage() {
      try {
        let res = await parameter('get', { parameterName: 'BaseStationImage' })
        if (res.code === 200) {
          this.iconData[0].value = res.data.value
          this.iconData[0].id = res.data.id
        }
      } catch (err) {
        // 基站图片
        this.iconData[0].value = assetsImages.baseStation
        // this.$message.error('基站图标查询失败，已使用默认图标！')
      }
    },
    // 监控图片
    async getMonitorImage() {
      try {
        let res = await parameter('get', { parameterName: 'MonitorImage' })
        if (res.code === 200) {
          this.iconData[1].value = res.data.value
          this.iconData[1].id = res.data.id
        }
      } catch (err) {
        // 监控设备
        this.iconData[1].value = assetsImages.camera
        // this.$message.error('监控图标查询失败，已使用默认图标！')
      }
    },
    // 人员图片
    async getPeopleImage() {
      try {
        let res = await parameter('get', { parameterName: 'PeopleImage' })
        if (res.code === 200) {
          this.iconData[2].value = res.data.value
          this.iconData[2].id = res.data.id
        }
      } catch (err) {
        // 施工队员图片
        this.iconData[2].value = assetsImages.people
      }
    },
    // 车辆图片
    async getCarImage() {
      try {
        let res = await parameter('get', { parameterName: 'CarImage' })
        if (res.code === 200) {
          this.iconData[3].value = res.data.value
          this.iconData[3].id = res.data.id
        }
      } catch (err) {
        // 车辆图片
        this.iconData[3].value = assetsImages.car
      }
    },
    // 环境监测设备图片
    async getAccessControlImage() {
      try {
        let res = await parameter('get', { parameterName: 'AccessControlImage' })
        if (res.code === 200) {
          this.iconData[4].value = res.data.value
          this.iconData[4].id = res.data.id
        }
      } catch (err) {
        // 环境监测图片
        this.iconData[4].value = assetsImages.sensor
      }
    },
    // 获取图标数据
    // async getTunnelData() {
    //   await this.getBaseStationImage()
    //   await this.getMonitorImage()
    //   await this.getPeopleImage()
    //   await this.getCarImage()
    //   await this.getAccessControlImage()
    // },
    openVideoHandler(item) {
      this.$refs['videoDialog'].openNew(item)
    },
    // 处理地图
    handleMap(value) {
      try {
        if (value.backedImageName) {
          this.imgSrc = imgUrl + '/' + value.backedImageName
        } else {
          if (value.templateName === '单洞') {
            this.imgSrc = assetsImages.singleHole
          } else if (value.templateName === '双洞') {
            this.imgSrc = assetsImages.doubleHole
          }
        }
      } catch (err) {
        let er = err
      }
    },
    // 基站
    handleBaseStation(value) {
      try {
        if (value.lenght === 0) {
          return
        }
        // 获取基站数据
        this.baseStationList = value.map((item, index) => {
          return {
            name: item.name,
            id: index + 'a',
            x: item.xPosition,
            y: item.yPosition,
            status: item.status,
            areaName: item.area ? item.area.name : '无',
            siteType: item.siteType === 1 ? '进基站' : item.siteType === 2 ? '出基站' : '其它基站',
            isForWorkCheck: item.isForWorkCheck,
            // 车辆位置数据
            carList: item.cars,
            // 人员位置数据
            propleList: item.realtimeLocationViews,
            arr: [],
            carArr: [],
            // 基站范围宽度
            widthPosition: item.widthPosition,
            // 基站范围高度
            heightPosition: item.heightPosition,
            // 基站范围左侧距离
            leftPosition: item.leftPosition,
            // 基站范围顶部距离
            topPosition: item.topPosition,
            // 基站范围旋转角度
            rotate: item.rotate
          }
        })

        this.baseStationList.forEach(item => {
          // 获取基站内人员位置
          if (item.propleList.length > 0) {
            item.arr = item.propleList.map((edit, editIndexObj) => {
              let obj = {}
              let objList = []
              objList = this.dptList.filter(dpt => edit.employee.departmentId === dpt.id)
              if (objList.length > 0) {
                obj = objList[0]
              } else {
                obj = this.dptList[this.dptList.length - 1]
              }
              return {
                id: editIndexObj + 'b',
                color: obj.value,
                name: edit.employee.name,
                rfid: edit.employee.rfid,
                phone: edit.employee.phone,
                status: edit.employee.status,
                left: this.random(0, Number(item.widthPosition) - 20),
                top: this.random(0, Number(item.heightPosition) - 20)
              }
            })
          }

          // 获取基站内车辆位置
          item.carArr = item.carList.map((car, carIndex) => {
            return {
              id: carIndex + 'c',
              name: car.carType,
              rfid: car.rfid,
              propleName: car.responsibleMan,
              proplePhone: car.responsiblePhone,
              plateNumber: car.plateNumber,
              left: this.random(0, Number(item.widthPosition) - 20),
              top: this.random(0, Number(item.heightPosition) - 20)
            }
          })
        })
      } catch (err) {
        let er = err
      }
    },
    // 门禁闸机
    handleGates(value) {
      try {
        if (value.lenght === 0) {
          return
        }
        // 获取基站数据
        this.gatesList = value.map(item => {
          return {
            name: item.name,
            x: item.xPosition,
            y: item.yPosition,
            areaName: item.area ? item.area.name : '无',
            siteType: item.siteType === 1 ? '进基站' : item.siteType === 2 ? '出基站' : '其它基站',
            isForWorkCheck: item.isForWorkCheck,
            // 车辆位置数据
            carList: item.cars,
            // 人员位置数据
            propleList: item.realtimeLocationViews,
            arr: [],
            carArr: [],
            // 基站范围宽度
            widthPosition: item.widthPosition,
            // 基站范围高度
            heightPosition: item.heightPosition,
            // 基站范围左侧距离
            leftPosition: item.leftPosition,
            // 基站范围顶部距离
            topPosition: item.topPosition,
            // 基站范围旋转角度
            rotate: item.rotate
          }
        })
        // 获取基站内人员位置
        this.gatesList.forEach(item => {
          let num = 2
          if (item.propleList.length > 0) {
            item.arr = item.propleList.map((edit, editIndex) => {
              let obj = {}
              let objList = []
              objList = this.dptList.filter(dpt => edit.employee.departmentId === dpt.id)
              if (objList.length > 0) {
                obj = objList[0]
              } else {
                obj = this.dptList[this.dptList.length - 1]
              }
              return {
                id: editIndex + 'd',
                color: obj.value,
                name: edit.employee.name,
                rfid: edit.employee.rfid,
                phone: edit.employee.phone,
                status: edit.employee.status,
                left: this.random(0, Number(item.widthPosition) - 20),
                top: this.random(0, Number(item.heightPosition) - 20)
              }
            })
          }

          // 获取基站内车辆位置
          let carNum = 2
          item.carArr = item.carList.map((car, carIndex) => {
            return {
              id: carIndex + 'e',
              name: car.carType,
              rfid: car.rfid,
              propleName: car.responsibleMan,
              proplePhone: car.responsiblePhone,
              plateNumber: car.plateNumber,
              left: this.random(0, Number(item.widthPosition - 20)),
              top: this.random(0, Number(item.heightPosition - 20))
            }
          })
        })
      } catch (err) {
        let er = err
      }
    },
    // 处理监控
    handleVedioData(value) {
      if (value.lenght === 0) {
        return
      }
      this.videoList = value.map(item => {
        return item
      })
    },
    // 环境检测设备
    handleEnvironmental(value) {
      if (value.lenght === 0) {
        return
      }
      this.environmentalList = value.map((item, index) => {
        return {
          name: item.name,
          x: item.x,
          y: item.y,
          id: index + 'f',
          ip: item.ip,
          code: item.code,
          settingItems: item.settingItems // 监测项
        }
      })
    },
    // 得到随机位置
    async buildLocation() {
      try {
        let resList = await tunnelRealTime(this.checked)
        // 处理区域
        this.getArea(resList.data.summaryInfo)
        // 处理地图
        this.handleMap(resList.data.tunnel)
        // 处理基站数据
        this.handleBaseStation(resList.data.baseStation)
        // 处理监控数据
        this.handleVedioData(resList.data.videos)
        // 门禁闸机
        this.handleGates(resList.data.gates)
        // 环境检测设备
        this.handleEnvironmental(resList.data.environmentTrackings)
        this.mapSwait = true
      } catch (err) {
        let er = err
      }
    },
    // 取随机数
    random(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min)
    }
  }
}
</script>
<style lang="scss" scoped>
  .labelDiv {
    display: flex;
    .deep {
      color: #000;
      width: 120px;
      text-align: left;
    }
    .shallow {
      padding-right: 10px;
      color: #666;
      width: 70px;
      text-align: right;
    }
  }
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .box-card {
    margin: 20px;
    ::v-deep.el-card__header {
      padding: 0px;
    }
  }

  .colorListUl {
    overflow: hidden;
    li {
      float: left;
      width: 200px;
      display: flex;
      font-size: 12px;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 10px;
      .colorDiv {
        border: 1px solid #ccc;
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 3px;
        margin-right: 10px;
      }
    }
  }
  .topUl {
    margin-left: 10px;
    width: 428px;
    // height: 100%;
    border: 1px solid #ccc;
    border-right: 0px solid #ccc;
    border-bottom: none;
    position: relative;

    left: 0;
    top: 0;
    margin-bottom: 15px;

    .liTitle {
      width: 100%;
      display: flex;

      border-bottom: 1px solid #ccc;

      .label {
        flex: 1;
        display: flex;
        padding: 10px 0;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ccc;
      }
      .value {
        border-right: 1px solid #ccc;
        display: flex;
        padding: 10px 0;
        align-items: center;
        justify-content: center;
      }
    }

    .red {
      color: red;
      font-size: 14px;
      font-weight: 550;
    }

    .lime {
      color: #06b706;
      font-weight: 550;
      font-size: 14px;
    }
    .tableValue {
      width: 80px !important;
    }
  }
  .mapBox {
    min-width: 1200px;
    max-width: 1200px;
    height: 617px;
    position: relative;
    border: 1px solid #ccc;
    background-color: #ccc;
    // transform-style: preserve-3d;
    // transform: rotateY(50deg) rotateX(50deg);

    .labelDiv {
      .label {
        color: #000;
      }
      .value {
        color: #333;
      }
    }

    .mapImg {
      width: 100%;
      height: 100%;
    }

    .cameraItem {
      z-index: 100;
      width: 20px;
      height: 20px;
      left: 0;
      top: 0;
      border-radius: 50%;
      position: absolute;
      display: inline-block;
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        float: left;
      }
    }

    .divdiv {
      width: 348px;
      height: 302px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #fff;
    }
    .divdivdiv {
      width: 400px;
      height: 300px;
      position: absolute;
      right: 0;
      top: 0;
      background-color: #fff;
    }
    .up {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      display: inline-block;
      background-color: #fff;
      transform: translate(-50%, -50%);
      img {
        float: left;
        width: 100%;
        height: 100%;
      }
    }
    .range {
      display: inline-block;
      position: absolute;
      // border: 1px solid lime;
      .up {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        position: absolute;
        display: inline-block;
        background-color: #fff;
        transform: translate(-50%, -50%);
        img {
          float: left;
          width: 100%;
          height: 100%;
        }
        // transform: rotateX(120deg) translateZ(220px) translateX(364PX);
        // .baseStation {
        // width: 60px;
        // height: 50px;
        // text-align: center;
        // line-height: 50px;
        // position: absolute;
        // background-color: #53868B;
        // transform: rotateX(180deg);
        // }
      }
      .people {
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        background-color: #fff;
        display: inline-block;
        transform: translate(-50%, -50%);
        img {
          width: 10%;
          height: 100%;
          float: left;
        }
      }
      .peopleTwo {
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        display: inline-block;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        /deep/.el-popover__reference-wrapper {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 100%;
            height: 100%;
            // width: 60%;
            // height: 60%;
            // background-color: #fff;
            // border-radius: 50%;
          }
        }
      }
    }
  }
</style>
